<!-- BEGIN: ACCORDION DEMO -->
<div class="toolbar">
    <div class="page-bar">
        <ul class="page-breadcrumb float-right">
            <li>
                <i class="fa fa-home"></i>
                <a [routerLink]="['/index/home']">管理中心</a>
                <i class="fa fa-angle-right"></i>
            </li>
            <li>
                <a [routerLink]="['/index/links']">系统字典管理</a>
                <i class="fa fa-angle-right"></i>
            </li>
            <li>
                <a href="javascript:;">{{appServ.pageTitle}}</a>
            </li>
        </ul>
        <h1 class="page-title"> <i class="icon-note font-green-sharp"></i> {{appServ.pageTitle}}</h1>
    </div>
</div>

<div class="dataform">
    <form class="form-horizontal" name="editForm" #editForm="ngForm" role="form" novalidate>
        <input type="hidden" ng-model="data.Id">
        <div class="form-body">
            <div class="form-group row">
                <label for="WebName" class="col-2 col-form-label">友链名称:</label>
                <div class="col-10">
                    <input type="text" [(ngModel)]="dataInfo.WebName" name="WebName" minlength="2" maxlength="100" class="form-control" placeholder="友链名称" required>
                </div>
            </div>
            <div class="form-group row">
                <label for="Url" class="col-2 col-form-label">友链地址:</label>
                <div class="col-10">
                    <input type="text" [(ngModel)]="dataInfo.Url" name="Url" minlength="2" maxlength="100" class="form-control" placeholder="友链地址" required>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-2 col-form-label">LOGO图片:</label>
                <div class="col-10">
                    <div class="input-group">
                        <input type="text" class="form-control input-medium" [(ngModel)]="dataInfo.LogoImg" name="Logo" id="Logo" placeholder="可以直接填写Url地址" />
                        <div class="btn-group">
                            <file-upload (fileSelect)="fileSelect($event)" [fileType]="'image/*'" [fileTypeErr]="'上传文件类型不正确'" [fileMaxSize]="'500KB'" [fileMaxSizeErr]="'文件太大了'">
                                <button class="btn blue" type="button"><i class="icon-picture"></i> 选择图片 </button>
                            </file-upload>
                            <button type="button" class="btn green" name="btnPreviewLogo" (click)="imgPreview.toggle($event)" *ngIf="dataInfo.LogoImg"> <i class="icon-eye"></i> 预览 </button>
                            <button type="button" class="btn btn-danger" name="btnClearLogo" *ngIf="dataInfo.LogoImg" (click)="dataInfo.LogoImg=''"> <i class="icon-trash"></i> 清除 </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-2 col-form-label">是否显示:</label>
                <div class="col-10">
                    <div class="mt-radio-inline">
                        <label class="mt-radio mt-radio-outline">
                            <input type="radio" name="Status" id="Status" [value]="0" checked> 显示
                            <span></span>
                        </label>
                        <label class="mt-radio mt-radio-outline">
                            <input type="radio" name="Status" id="Status" [value]="1"> 不显示
                            <span></span>
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <label for="RedirectUrl" class="col-2 col-form-label">链接类型:</label>
                <div class="col-4">
                    <select name="LinkType" class="form-control" [(ngModel)]="dataInfo.LinkType">
                        <option *ngFor="let item of linkTypes" [value]="item.Value">{{item.Title}}</option>
                    </select>
                </div>
                <label for="OrderID" class="col-2 col-form-label">排序id:</label>
                <div class="col-4">
                    <input type="text" min="0" max="10000" [(ngModel)]="dataInfo.OrderId" name="OrderId" minlength="1" maxlength="5" class="form-control" placeholder="排序" required>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-2 col-form-label">扩展属性:</label>
                <div class="col-10">
                    <input type="text" [(ngModel)]="dataInfo.ExtAttrib" name="ExtAttrib" maxlength="100" class="form-control" placeholder="扩展属性">
                </div>
            </div>
        </div>
        <div class="form-actions">
            <hr/>
            <div class="row">
                <div class="col-md-12 text-center">
                    <button class="btn green" (click)="dataSave()" [disabled]="!editForm.form.valid"> <span class="fa fa-save"></span> 保存</button>
                </div>
            </div>
        </div>
    </form>

</div>

<p-overlayPanel #imgPreview appendTo="body">
    <div class="imgPreview">
        <img [src]="dataInfo.LogoImg" class="img-fluid" />
    </div>
</p-overlayPanel>